<template>
	<view class="commond-container">

		<scroll-view scroll-y="true" class="scroll-container">
			<view class="recommend-container">
				<view class="individuality-title">选择恋人类型</view>
				<view class="individuality-card">
					<view class="individuality-card-box">
						<view class="individuality-explain character-icon">
							<image src="http://static.kuaimayoupin.com/9065761417648923.png" mode="aspectFit" class=""></image>
							<text>性格</text>
						</view>
						<view class="individuality-tag-box characterList">
							<text v-for="(item, index) in characters" :key="index" :class="['individuality-tag', activityCharacter(item) ? 'active' : '']"
							 @click="characterEvent(item)">
								{{ item.label }}
							</text>
						</view>
					</view>
					<view class="individuality-card-box card-box-bottom">
						<view class="individuality-explain interest-icon">
							<image src="http://static.kuaimayoupin.com/0806230835299817.png" mode="aspectFit" class=""></image>
							<text>兴趣</text>
						</view>
						<view class="individuality-tag-box interestList">
							<text v-for="(item, index) in interests" :key="index" :class="['individuality-tag', activityInterest(item) ? 'active' : '']"
							 @click="interestEvent(item)">
								{{ item.label }}
							</text>
						</view>
					</view>
					<view class="tag-selected" v-show="isShowSelected">
						<view class="tag-selected-box">
							<view v-for="(item, index) in totoaSelected" :key="index" :class="['selected-tag', selectedStyle(item)]" @click="totoalSelectedEvent(item)">
								<text>{{ item.label }}</text>
								<u-icon name="close" color="#ffffff" size="20"></u-icon>
							</view>

						</view>
					</view>
				</view>
				<view class="individuality-title">其他要求<span class="individuality-title-span">（双方条件都匹配，缘分才高哦）</span></view>
				<view class="other-require-card">
					<view class="other-require-item-box">
						<text class="other-require-item-title">年龄</text>
						<view class="other-require-item-right" @click="showSelectedView(1)">
							<text class="other-require-item-value">{{agesStr || "请选择"}}</text>
							<u-icon name="arrow-right" color="#8389A0"></u-icon>
						</view>

					</view>
					<view class="other-require-item-box">
						<text class="other-require-item-title">婚姻状况</text>
						<view class="other-require-item-right" @click="showSelectedView(2)">
							<text class="other-require-item-value">{{getMaritalStatus()|| "请选择"}}</text>
							<u-icon name="arrow-right" color="#8389A0"></u-icon>
						</view>
					</view>
					<view class="other-require-item-box">
						<text class="other-require-item-title">身高范围</text>
						<view class="other-require-item-right" @click="showSelectedView(3)">
							<text class="other-require-item-value">{{lengthStr || "请选择"}}</text>
							<u-icon name="arrow-right" color="#8389A0"></u-icon>
						</view>
					</view>
					<view class="other-require-item-box">
						<text class="other-require-item-title">学历</text>
						<view class="other-require-item-right" @click="showSelectedView(4)">
							<text class="other-require-item-value">{{getEducation() || "请选择"}}</text>
							<u-icon name="arrow-right" color="#8389A0"></u-icon>
						</view>
					</view>
					<view class="other-require-item-box">
						<text class="other-require-item-title">工作地</text>
						<view class="other-require-item-right" @click="addressShowEvent()">
							<text class="other-require-item-value">{{address || "请选择"}}</text>
							<u-icon name="arrow-right" color="#8389A0"></u-icon>
						</view>
					</view>
					<view class="other-require-item-box">
						<text class="other-require-item-title">月收入</text>
						<view class="other-require-item-right" @click="showSelectedView(6)">
							<text class="other-require-item-value">{{getSalary() || "请选择"}}</text>
							<u-icon name="arrow-right" color="#8389A0"></u-icon>
						</view>
					</view>
					<view class="other-require-item-box">
						<text class="other-require-item-title">最在意对方</text>
						<view class="other-require-item-right" @click="chooseCareAction">
							<text class="other-require-item-value">{{best_of_all_str || "请选择"}}</text>
							<u-icon name="arrow-right" color="#8389A0"></u-icon>
						</view>
					</view>
				</view>
				<view class="customize-btn" @click="goCustomize">
					定制我的缘分
				</view>
				<u-select v-model="show" :mode="selectedModel" :list="list" @confirm="confirm"></u-select>
				<uu-picker mode="region" v-model="addressShow" :params="params" @confirm="provinceEvent"></uu-picker>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		isEmpty
	} from '@/util/tool.js'
	import {
		EventBus
	} from '@/util/event-bus.js';
	import {
		customizeLover
	} from '@/api/home/home.js'
	import config from '@/store/modules/config.js';
	import uuPicker from "./u-picker.vue"
	import {
		loadInterestLabels,
		loadPersonalityLabels,
		completeInformation
	} from '@/api/user/user.js'
	export default {
		components: {uuPicker},
		computed: {
			isShowSelected() {
				return this.totoaSelected.length > 0
			}
		},
		data() {
			return {
				characters: [],
				interests: [],
				characterList: [], // 选择的性格
				interestList: [], // 选择的兴趣
				totoaSelected: [],
				form: {
					character: '',
					interest: '',
					soliloquy: ''
				},
				show: false,
				addressShow: false,
				list: [],
				selectedModel: "mutil-column",
				agesStr: undefined, // 年龄
				marriage: undefined, // 婚姻
				lengthStr: undefined, // 身高
				education: undefined, // 学历
				salary: undefined, //薪资
				address: undefined, // 地址
				best_of_all: undefined,
				best_of_all_str: undefined,
				params: {
					province: true,
					city: true,
					area: false
				},
			};
		},
		created() {
			let that = this
			EventBus.$on('careSure', function(res) {
				that.handleCareData(res)
			});
		},
		mounted() {
			loadInterestLabels().then(res => {
				this.interests = res.data
			})
			loadPersonalityLabels().then(res => {
				this.characters = res.data
			})
		},
		methods: {
			// 兴趣
			activityInterest(item) {
				return item.selected || false
			},
			/// 性格
			activityCharacter(item) {
				return item.selected || false
			},
			/// 婚姻
			getMaritalStatus(){
				let marital_status = this.marital_status || {}
				return marital_status.label 
			},
			/// 教育
			getEducation(){
				let education = this.education || {}
				return education.label
			},
			/// 薪水 
			getSalary(){
				let salary = this.salary || {}
				return salary.label 
			},
			selectedStyle(item) {
				if (this.interestList.indexOf(item) != '-1') {
					return "interest-selected"
				} else {
					return "character-selected"
				}

			},

			provinceEvent(e) {
				console.log(e);
				let cityCode =  e.city.value
				if ( cityCode === "1101" || cityCode === "1201" || cityCode === "3101" || cityCode === "5001" || cityCode === "5002"){
					this.address = e.province.label;
				} else {
					this.address = e.city.label;
				}
				
				console.log(this.address);
			},
			addressShowEvent() {
				this.addressShow = true
			},
			characterEvent(item) {
				item.selected = !item.selected
				if (this.characterList.indexOf(item) == '-1') {
					this.characterList.push(item);
				} else {
					this.characterList.splice(this.characterList.indexOf(item), 1)
				}
				this.totoaSelectedFunc()
			},
			interestEvent(item) {
				item.selected = !item.selected
				if (this.interestList.indexOf(item) == '-1') {
					this.interestList.push(item);
				} else {
					this.interestList.splice(this.interestList.indexOf(item), 1)
				}
				this.totoaSelectedFunc()
			},
			totoaSelectedFunc() {
				this.totoaSelected = [];
				this.totoaSelected = this.totoaSelected.concat(this.characterList);
				this.totoaSelected = this.totoaSelected.concat(this.interestList);
				console.log("totoaSelected");
				console.log(this.totoaSelected);

			},
			totoalSelectedEvent(item) {
				let itemId = item._id
				for (let index in this.characters) {
					let character = this.characters[index]
					if (character._id === itemId) {
						character.selected = !character.selected
					}
				}
				for (let index in this.interests) {
					let interest = this.interests[index]
					if (interest._id === itemId) {
						interest.selected = !interest.selected
					}
				}

				for (let index in this.characterList) {
					let cItem = this.characterList[index]
					if (cItem._id === itemId) {
						this.characterList.splice(this.characterList.indexOf(cItem), 1)
					}
				}
				for (let index in this.interestList) {
					let iItem = this.interestList[index]
					if (iItem._id === itemId) {
						this.interestList.splice(this.interestList.indexOf(iItem), 1)
					}
				}
				if (this.totoaSelected.indexOf(item) != '-1') {
					this.totoaSelected.splice(this.totoaSelected.indexOf(item), 1)
				}
				console.log("characterList", this.characterList)
				console.log("interestList", this.interestList)

			},
			showSelectedView(type) {
				this.list = [];
				if (type === 1) {
					this.list = config.ages()
					this.selectedModel = "mutil-column"
				} else if (type === 2) {
					this.list = config["marital_status"]
					this.selectedModel = "single-column"
				} else if (type === 3) {
					this.list = config.heights()
					this.selectedModel = "mutil-column"
				} else if (type === 4) {
					this.selectedModel = "single-column"
					this.list = config["education"]
				} else if (type === 6) {
					this.selectedModel = "single-column"
					this.list = config["salary"]
				}
				this.show = true


			},
			confirm(e) {
				console.log(JSON.stringify(e));
				let extra = e[0].extra
				if (extra === "age") {
					let age1 = e[0].value
					let age2 = e[1].value
					if (age1 < age2) {
						this.agesStr = e[0].label + "岁" + "-" + e[1].label + "岁"
					} else {
						this.agesStr = e[1].label + "岁" + "-" + e[0].label + "岁"
					}
				} else if (extra === "marital_status") {
					/// 婚姻状况
					this.marital_status = e[0]
				} else if (extra === "height") {
					let height1 = e[0].value
					let height2 = e[1].value
					if (height1 < height2) {
						this.lengthStr = e[0].label + "cm" + "-" + e[1].label + "cm"
					} else {
						this.lengthStr = e[1].label + "cm" + "-" + e[0].label + "cm"
					}
				} else if (extra === "education") {
					this.education = e[0]
				} else if (extra === 'salary') {
					this.salary = e[0]
				}
			},
			chooseCareAction(){
				uni.navigateTo({
					url: "/pages/home/care/care"
				})
			},
			/// 处理在意的数据
			handleCareData(res){
				this.best_of_all = res
				this.best_of_all_str = res.join(";")
				console.log("best_of_all--------",this.best_of_all)
			},
			// 去定制
			goCustomize() {
				///老板说：选择性格和兴趣暂时非必填
				// if (this.characterList.length === 0) {
				// 	uni.showToast({
				// 		title: '请选择性格',
				// 		icon: "none"
				// 	});
				// 	return;
				// }
				// if (this.interestList.length === 0) {
				// 	uni.showToast({
				// 		title: '请选择兴趣',
				// 		icon: "none"
				// 	});
				// 	return;
				// }
				if (isEmpty(this.agesStr)) {
					uni.showToast({
						title: '请选择年龄',
						icon: "none"
					});
					return;
				}
				if (isEmpty(this.getMaritalStatus())) {
					uni.showToast({
						title: '请选择婚姻状况',
						icon: "none"
					});
					return;
				}
				if (isEmpty(this.lengthStr)) {
					uni.showToast({
						title: '请选择身高',
						duration: 2000
					});
					return;
				}
				if (isEmpty(this.getEducation())) {
					uni.showToast({
						title: '请选择学历',
						duration: 2000
					});
					return;
				}
				if (isEmpty(this.address)) {
					uni.showToast({
						title: '请选择工作地',
						duration: 2000
					});
					return;
				}
				if (isEmpty(this.getSalary())) {
					uni.showToast({
						title: '请选择薪资',
						duration: 2000
					});
					return;
				}
				
				if (isEmpty(this.best_of_all_str)) {
					uni.showToast({
						title: '请选择你最在意的地方',
						duration: 2000
					});
					return;
				}
				// var personality = ""
				// this.characterList.map(
				// 	(item, index) => {
				// 	personality += (item.label || "" + ";")
				// });
				// var interest = "";
				// this.interestList.map(
				// 	(item, index) => {
				// 	interest += (item.label || "" + ";")
				// });
				let data = {
					labels:"",
					age: this.agesStr,
					marital_status:this.marital_status,
					height: this.lengthStr, // 身高
					work_place: this.address, // 工作地址
					salary: this.salary, // 月收入
					personality: this.characterList, // 性格类型
					interest: this.interestList ,//兴趣
					best_of_all: this.best_of_all, //最在意
					education: this.education ,// 学历 
					marital_status:this.marital_status // 婚姻状况
										
				}
				console.log(data)
				customizeLover(data).then(res => {
					
					var resMeg = "";
					if (res.status == 1) {
						resMeg =  res.message || "定制成功" ;
						getApp().globalData.userInfo.customized = true
						EventBus.$emit('didCustomize', true);
					} else {
						resMeg =  res.message || "定制失败" ;
					}
					uni.showToast({
						title: resMeg,
						icon: 'none'
					})
					console.log("定制结果----",JSON.stringify(res))
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	* {
		display: flex;
		box-sizing: border-box;
	}

	.commond-container {
		height: 100%;

		.scroll-container {
			width: 100%;
			height: 100%;
			background-color: #FFFFFF;

			.recommend-container {

				width: 100%;
				padding: 0 32rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.customize-btn {
					width: 686rpx;
					height: 80rpx;
					background: linear-gradient(135deg, rgba(252, 79, 145, 1) 0%, rgba(253, 108, 230, 1) 100%);
					border-radius: 4rpx;
					text-align: center;
					color: #fff;
					line-height: 80rpx;
					margin-bottom: 40rpx;
					margin-top: 10rpx;
				}

				.individuality-title {
					width: 100%;
					font-size: 36rpx;
					font-weight: 500;
					color: rgba(71, 74, 88, 1);
					line-height: 24px;
					margin-bottom: 20rpx;
					margin-top: 16rpx;

					.individuality-title-span {
						height: 48rpx;
						font-size: 26rpx;
						font-weight: 300;
						color: #474A58;
						line-height: 48rpx;
					}
				}

				.individuality-card {
					width: 100%;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 3px 10px 0px rgba(0, 42, 64, 0.07);
					border: 1px solid rgba(233, 235, 240, 1);
					margin-bottom: 50rpx;
					border-radius: 16rpx;
					position: relative;

					.character-icon {
						color: #ffd14d;
						font-size: 24rpx;
						line-height: 36rpx;
						margin-right: 34rpx;

						image {
							display: block;
							width: 48rpx;
							height: 48rpx;
							margin: 0 auto 10rpx;
						}
					}

					.interest-icon {
						color: #4388ff;
						font-size: 24rpx;
						line-height: 36rpx;
						margin-right: 34rpx;

						image {
							display: block;
							width: 56rpx;
							height: 42rpx;
							margin: 0 auto 10rpx;
						}
					}

					.characterList .active {
						background: #f9d05a;
						color: #fff;
						border: 1px solid #f9d05a;
					}

					.interestList .active {
						background: #489eff;
						color: #fff;
						border: 1px solid #489eff;
					}

					.individuality-card-box {
						display: flex;
						justify-content: space-between;
						padding: 40rpx 18rpx 0 30rpx;

						.individuality-tag-box {
							width: 100%;
							display: flex;
							flex-wrap: wrap;

							.individuality-tag {
								display: inline-block;
								padding: 6rpx 18rpx;
								border-radius: 40rpx;
								border: 1px solid rgba(223, 225, 236, 1);
								margin-bottom: 10rpx;
								margin-right: 12rpx;
								font-size: 24rpx;
								box-sizing: border-box;
							}
						}
					}

					.card-box-bottom {
						padding-bottom: 40rpx;
					}

					.tag-selected {
						width: 100%;
						background-color: #E9EBF0;
						padding: 30rpx 20rpx;

						.interest-selected {
							background-color: #489EFF;
							border: 1px solid #489eff;
							color: #fff;
						}

						.character-selected {
							background-color: #F9D05A;
							border: 1px solid #F9D05A;
							color: #fff;
						}

						.tag-selected-box {
							width: 100%;
							display: flex;
							flex-wrap: wrap;

							.selected-tag {
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: space-between;
								padding: 6rpx 18rpx;
								border-radius: 40rpx;
								border: 1px solid rgba(223, 225, 236, 1);
								margin-bottom: 10rpx;
								margin-right: 12rpx;
								box-sizing: border-box;

								text {
									font-size: 26rpx;
									margin-right: 10rpx;
								}
							}

						}
					}
				}

				.other-require-card {
					width: 100%;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 3px 10px 0px rgba(0, 42, 64, 0.07);
					border: 1px solid rgba(233, 235, 240, 1);
					margin: 0 32rpx 20rpx 32rpx;
					border-radius: 16rpx;
					display: flex;
					padding: 30rpx 32rpx 40rpx 32rpx;
					flex-direction: column;

					.other-require-item-box {
						display: flex;
						width: 100%;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						margin-top: 20rpx;
					}

					.other-require-item-title {
						height: 42rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: rgba(71, 74, 88, 1);
						line-height: 42rpx;
					}

					.other-require-item-right {
						.other-require-item-value {
							height: 42rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #8389A0;
							line-height: 42rpx;
						}
					}
				}
			}
		}
	}

	.picker-view {
		position: fixed;
		bottom: 0;
		z-index: 999;
	}
</style>
